<template>
  <ElDescriptions :column="column" border class="mt5px">
    <ElDescriptionsItem label="弹窗模式" :span="column">
      <ElSelect v-model="modelValue.position">
        <ElOption label="对话框" value="dialog" />
        <ElOption label="抽屉" value="drawer" />
      </ElSelect>
    </ElDescriptionsItem>
    <ElDescriptionsItem label="标题">
      <el-input v-model="modelValue.title" />
    </ElDescriptionsItem>
    <ElDescriptionsItem v-if="isDialog" label="宽度">
      <el-input-number v-model="modelValue.width" />
    </ElDescriptionsItem>
    <ElDescriptionsItem v-if="isDialog" label="最大高度">
      <el-input v-model="modelValue.maxHeight" />
    </ElDescriptionsItem>
    <ElDescriptionsItem v-if="isDialog" label="是否最大化">
      <ElSwitch v-model="modelValue.fullscreen" />
    </ElDescriptionsItem>
    <ElDescriptionsItem v-if="isDrawer" label="尺寸">
      <div class="flex">
        <ElInputNumber v-model="size" class="w80%" />
        <ElSelect v-model="unit" class="w20%">
          <ElOption label="px" value="px" />
          <ElOption label="%" value="%" />
        </ElSelect>
      </div>
    </ElDescriptionsItem>
    <ElDescriptionsItem  v-if="isDrawer" label="方向">
      <ElSelect v-model="modelValue.direction">
        <ElOption value="rtl" label="从右到左" />
        <ElOption value="ltr" label="从左到右" />
        <ElOption value="ttb" label="从上到下" />
        <ElOption value="btt" label="从下到上" />
      </ElSelect>
    </ElDescriptionsItem>
  </ElDescriptions>
</template>
<script setup lang="ts">
  import { ElDescriptions, ElDescriptionsItem, ElOption, ElSelect, ElInput, ElInputNumber, ElSwitch } from 'element-plus';
  import { computed, ref, watch } from 'vue';

  const props = defineProps<{modelValue: any}>()
  const column = 4

  function getSizeValue(): [string, 'px'|'%'] {
    const size: string = props.modelValue.size
    if(size) {
      return size.endsWith('%') ? [size.substring(0, size.length - 1), '%'] : [size, 'px']
    } else {
      return [void 0, '%']
    }
  }
  const sizeValue = getSizeValue()
  const size = ref<number>(parseInt(sizeValue[0]))
  const unit = ref<'px'|'%'>(sizeValue[1])
  const isDialog = computed(() => !props.modelValue?.position || props.modelValue.position === 'dialog')
  const isDrawer = computed(() => props.modelValue?.position === 'drawer')

  watch([() => size.value, () => unit.value], () => props.modelValue.size = size.value ? `${size.value}${unit.value}` : void 0)
  watch(() => unit.value, () => size.value = void 0)
</script>